<template>
  <div class="w-full shadow-md m-menu" :class="{ stickyMenu: isPersonCenter }">
    <div
      :class="{
        'w-1200-container': !isPersonCenter,
        'person-container': isPersonCenter,
      }"
    >
      <LoginPoup ref="loginPoup" />

      <div class="flex py-3 nav">
        <div
          class="flex-1 flex items-center"
          style="min-width: 17rem; width: 17rem"
        >
          <el-image
            class="web-icon min-w-5rem"
            :src="websiteIcon"
            fit="contain"
          ></el-image>
          <h2 class="text-xl font-bold" style="min-width: 12rem">
            <div>江西省独角兽 | 瞪羚</div>
            <div>企业服务平台</div>
          </h2>
        </div>

        <Navbar :style="{ flex: isPersonCenter && '4' }" />

        <div v-if="token" class="head-nav-user">
          <router-link
            :to="{
              path: '/user',
            }"
          >
            <el-button round type="primary"> 进入控制台 </el-button>
          </router-link>
          <!-- <span class="nav-user-select"> {{ userName }} </span> -->

          <el-dropdown class="nav-user-select" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ userName }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="min-w-5rem text-center">
              <el-dropdown-item command="signOut">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <!-- <span class="pl-8" @click="signOut">退出</span> -->
        </div>
        <div v-else class="px-8 cursor-pointer flex items-center min-w-8rem">
          <span @click="signIn" class="inline-block mx-2 text-blue-500"
            >登录</span
          >

          <span
            class="inlin-block py-1 px-4 rounded-md mx-2 bg-blue-600 text-white"
          >
            <router-link :to="{ path: '/register' }">注册</router-link>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "../Navbar/index.vue";
import { mapGetters } from "vuex";
import LoginPoup from "@/layoutHome/components/LoginPoup";

export default {
  name: "Head",

  components: { Navbar, LoginPoup },
  data() {
    return {
      websiteIcon: require("@/assets/images/home/icon.png"),

      // 是否在个人中心内
      isPersonCenter: false,
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        // this.redirect = route.query && route.query.redirect;
        // if (route.query.isShowLogin) {
        //   this.dialogLogin = true;
        // }

        // 此处监听是为了知道当前菜单是否到了个人中心页面
        if (route.path.indexOf("/user") !== -1) {
          this.isPersonCenter = true;
        } else {
          this.isPersonCenter = false;
        }
      },
      immediate: true,
    },
    dialogLogin(v) {
      let ishasshowLogin = this.$route.query.isShowLogin;
      if (ishasshowLogin && !v) {
        this.$router.push({
          path: "/login",
        });
      }
    },
  },
  computed: {
    ...mapGetters({
      token: "token",
      userName: "name",
    }),
  },
  methods: {
    signIn() {
      this.$refs["loginPoup"].signIn();
    },
    signOut() {
      this.$refs["loginPoup"].signOut();
    },
    handleCommand(command) {
      if (command === "signOut") {
        this.signOut();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.m-menu {
  height: 6rem;
  max-height: 6rem;
  @apply bg-white border-b;
}

/** 如果当前为个人中心页面 使用此布局 */
.stickyMenu {
  @apply sticky left-0 top-0 z-10;
}

.person-container {
  @apply px-10;
}
/** END */

.nav .el-menu-item.is-active {
  border-bottom-width: 0;
  border-color: #fff;
  font-weight: bold;
}

::v-deep .nav li.el-menu-item {
  text-align: center;
  font-size: 18px;
  @apply flex items-center justify-center;
  // &:hover {
  //   font-weight: bold;
  // }
}

.el-menu.nav {
  border-bottom-width: 0;
  border-color: #fff;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }
}

.web-icon {
  width: 102px;
  height: 55px;
}
.head-nav-user {
  @apply min-w-8rem flex items-center px-4 cursor-pointer;
  .nav-user-select {
    @apply px-2 min-w-8rem;

    .el-icon-arrow-down {
      font-size: 12px;
    }
    .demonstration {
      display: block;
      color: #8492a6;
      font-size: 14px;
      margin-bottom: 20px;
    }
  }
}
</style>
